<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imglist img{
            width: 300px;
            height:180px;
            background: url('./imgs/loading.gif') no-repeat 50% 50%;
        }
    </style>
</head>
<body>
    <h1>图片延迟加载</h1>
    <hr>

    <div id="imglist">
        <img data-src="./imgs/Meinv001.jpg">
        <img data-src="./imgs/Meinv002.jpg">
        <img data-src="./imgs/Meinv003.jpg">
        <img data-src="./imgs/Meinv004.jpg">
        <img data-src="./imgs/Meinv005.jpg">
        <img data-src="./imgs/Meinv006.jpg">
        <img data-src="./imgs/Meinv007.jpg">
        <img data-src="./imgs/Meinv008.jpg">
        <img data-src="./imgs/Meinv009.jpg">
        <img data-src="./imgs/Meinv010.jpg">
        <img data-src="./imgs/Meinv011.jpg">
        <img data-src="./imgs/Meinv012.jpg">
        <img data-src="./imgs/Meinv013.jpg">
        <img data-src="./imgs/Meinv014.jpg">
        <img data-src="./imgs/Meinv015.jpg">
    </div>

    <script>
        setTimeout(function() {
            // 获取图片集合
            var imgs = document.getElementById('imglist').getElementsByTagName('img');

            // 遍历
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }, 2500);

    
    </script>
</body>
</html>